<template>
    <div class="editPage">
        <el-container>
            <el-header class="page_header">
                <div class="header_title">
                    封装编辑
                </div>
            </el-header>
            <!-- 主要区域 -->
            <el-container class="main_area">
                <!-- 功能区 -->
                <el-aside class="left_tool" width="30px">Aside</el-aside>
                <!-- 图形编辑区域 -->
                <el-container>
                    <!-- 主页面区 -->
                    <el-main>
                        <el-container direction="vertical">
                            <!-- 添加图形 -->
                            <el-header height="30px" class="base_graphic_tool">
                                <div class="tool_break">
                                    <svg width="10" height="30" xmlns="http://www.w3.org/2000/svg">
                                        <circle r="2" cy="6" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="15" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="24" cx="5" fill="#f1f1f1"/>
                                    </svg>
                                </div>
                                <!-- pin -->
                                <div class="tool_class">
                                    <!-- 圆pin -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PIN_C'}" @click="addGraphic('PIN_C')">
                                        <svg width="30" height="30" class="img_patterning_icon">
                                            <circle cx="15" cy="15" r="10"  fill="rgb(89, 107, 227)" />
                                            <circle cx="15" cy="15" r="5"  fill="rgb(190, 192, 185)" />
                                        </svg>
                                    </div>
                                    <!-- 矩形 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PIN_R'}" @click="addGraphic('PIN_R')">
                                        <svg width="30" height="30" class="img_patterning_icon">
                                            <rect x="5" y="5" width="20" height="20" fill="rgb(89, 107, 227)" />
                                            <circle cx="15" cy="15" r="6"  fill="rgb(190, 192, 185)" />
                                        </svg>
                                    </div>
                                    <!-- 圆矩 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PIN_CS'}" @click="addGraphic('PIN_CS')">
                                        <svg width="30" height="30" class="img_patterning_icon">
                                            <rect x="5" y="5" rx="6" ry="6" width="20" height="20"  fill="rgb(89, 107, 227)"/>
                                            <circle cx="15" cy="15" r="6"  fill="rgb(190, 192, 185)" />
                                        </svg>
                                    </div>
                                    <!-- 椭圆 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PIN_OV'}" @click="addGraphic('PIN_OV')">
                                        <svg width="30" height="30" class="img_patterning_icon">
                                            <circle cx="15" cy="12.5" r="7.5"  fill="rgb(89, 107, 227)" />
                                            <circle cx="15" cy="17.5" r="7.5"  fill="rgb(89, 107, 227)" />
                                            <rect x="7.5" y="10" width="15" height="7.5" fill="rgb(89, 107, 227)" />
                                            
                                            <circle cx="15" cy="12.5" r="4"  fill="rgb(190, 192, 185)" />
                                            <circle cx="15" cy="17.5" r="4"  fill="rgb(190, 192, 185)" />
                                            <rect x="11" y="11" width="8" height="7.5" fill="rgb(190, 192, 185)" />
                                        </svg>
                                    </div>
                                    <!-- 八角 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PIN_OC'}" @click="addGraphic('PIN_OC')">
                                        <svg width="30" height="30" class="img_patterning_icon">
                                            <path d="M 11 7 L 19 7 L 23 11 L 23 19 L 19 23 L 11 23 L 7 19 L 7 11 Z "  fill="rgb(89, 107, 227)" />
                                            <circle cx="15" cy="15" r="5"  fill="rgb(190, 192, 185)" />
                                        </svg>
                                    </div>
                                    <!-- 多边形 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PIN_PLOR'}" @click="addGraphic('PIN_PLOR')">
                                        <svg width="30" height="30" class="img_patterning_icon">
                                            <polygon points="15,5.1 9,24.8 24.0,12.8 6.0,12.8 21.0,24.8"
                                                style="fill:lime;stroke:purple;stroke-width:0;fill-rule:nonzero;fill:rgb(89, 107, 227);" />
                                        </svg>
                                    </div>
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PIN_PATH'}" @click="addGraphic('PIN_PATH')">
                                        <svg width="30" height="30" class="img_patterning_icon">
                                            <path d="M5,5 C15,5 15,5 15,15 C 15,25 15,25 25,25" stroke="rgb(89, 107, 227)" stroke-width="2" fill="none" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="tool_break">
                                    <svg width="10" height="30" xmlns="http://www.w3.org/2000/svg">
                                        <circle r="2" cy="6" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="15" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="24" cx="5" fill="#f1f1f1"/>
                                    </svg>
                                </div>
                                <!-- 线条 -->
                                <div class="tool_class">
                                    <!-- 连续线条 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PATH_LINE'}" @click="addGraphic('PATH_LINE')">
                                        <svg width="30" height="30">
                                            <line x1="5" y1="5" x2="25" y2="25" style="stroke:#1a2273;stroke-width:2"/>
                                        </svg>
                                    </div>
                                    <!-- 弧线 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PATH_ARC'}" @click="addGraphic('PATH_ARC')">
                                        <svg width="30" height="30">
                                            <path d="M 5 5 q 15 2 20 20" stroke="#1a2273" stroke-width="2" fill="none" />
                                            <!--m 起x y q 顶x y 终x y-->
                                        </svg>
                                    </div>
                                    <!-- 圆形 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PATH_C'}" @click="addGraphic('PATH_C')">
                                        <svg width="30" height="30">
                                            <circle cx="15" cy="15" r="10"  stroke-width="2" stroke="#1a2273" fill="none"/>
                                        </svg>
                                    </div>
                                    <!-- 矩形 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PATH_R'}" @click="addGraphic('PATH_R')">
                                        <svg width="30" height="30">
                                            <rect x="5" y="5" width="20" height="20" stroke-width="2" stroke="#1a2273" fill="none" />
                                        </svg>
                                    </div>
                                    <!-- 椭圆 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PATH_OV'}" @click="addGraphic('PATH_OV')">
                                        <svg width="30" height="30" >
                                            <ellipse cx="15" cy="15" rx="13" ry="8" stroke-width="2" stroke="#1a2273" fill="none" />
                                        </svg>
                                    </div>
                                    <!-- 八角 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PATH_OC'}" @click="addGraphic('PATH_OC')">
                                        <svg width="30" height="30">
                                            <path d="M 11 7 L 19 7 L 23 11 L 23 19 L 19 23 L 11 23 L 7 19 L 7 11 Z " stroke="#1a2273" stroke-width="2" fill="none" />
                                        </svg>
                                    </div>
                                    <!-- 自定义图形 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'PATH_PATH'}" @click="addGraphic('PATH_PATH')">
                                        <svg width="30" height="30">
                                            <path d="M5,5 C15,5 15,5 15,15 C 15,25 15,25 25,25" stroke="#1a2273" stroke-width="2" fill="none" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="tool_break">
                                    <svg width="10" height="30" xmlns="http://www.w3.org/2000/svg">
                                        <circle r="2" cy="6" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="15" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="24" cx="5" fill="#f1f1f1"/>
                                    </svg>
                                </div>
                                <!-- 铜皮 -->
                                <div class="tool_class">
                                    <!-- 圆形铜皮 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'SHAPE_C'}" @click="addGraphic('SHAPE_C')">
                                        <svg width="30" height="30">
                                            <circle cx="15" cy="15" r="10"  stroke-width="2"  fill="#0aab29"/>
                                        </svg>
                                    </div>
                                    <!-- 矩形铜皮 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'SHAPE_R'}" @click="addGraphic('SHAPE_R')">
                                        <svg width="30" height="30">
                                            <rect x="5" y="5" width="20" height="20" stroke-width="2" fill="#0aab29" />
                                        </svg>
                                    </div>
                                    <!-- 路径铜皮 -->
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'SHAPE_PATH'}" @click="addGraphic('SHAPE_PATH')">
                                        <svg width="30" height="30">
                                            <path d="M5,5 C15,5 15,5 15,15 C 15,25 15,25 25,25" stroke="#0aab29" stroke-width="2" fill="none" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="tool_break">
                                    <svg width="10" height="30" xmlns="http://www.w3.org/2000/svg">
                                        <circle r="2" cy="6" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="15" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="24" cx="5" fill="#f1f1f1"/>
                                    </svg>
                                </div>
                                <!-- 文字 -->
                                <div class="tool_class">
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'TEXT_TEXT'}" @click="addGraphic('TEXT_TEXT')">
                                        <svg width="30" height="30">
                                            <text x="0" y="20" fill="red">TEXT</text>
                                        </svg>
                                    </div>
                                </div>
                                <div class="tool_break">
                                    <svg width="10" height="30" xmlns="http://www.w3.org/2000/svg">
                                        <circle r="2" cy="6" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="15" cx="5" fill="#f1f1f1"/>
                                        <circle r="2" cy="24" cx="5" fill="#f1f1f1"/>
                                    </svg>
                                </div>
                                <!-- 一脚标识 -->
                                <div class="tool_class">
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'MARK_T'}" @click="addGraphic('MARK_T')">
                                        <svg width="30" height="30" viewBox="-110 -110 1300 1300">
                                            <path d="M442.7 145.8L66.1 798.2c-30.8 53.3 7.7 120 69.3 120h753.3c61.6 0 100.1-66.7 69.3-120L581.3 145.8c-30.8-53.3-107.8-53.3-138.6 0z" p-id="1872" fill="#13227a"></path>
                                        </svg>
                                    </div>
                                    <div class="tool_item" :class="{active: addGraphicOption.exec == 'MARK_C'}" @click="addGraphic('MARK_C')">
                                        <svg width="30" height="30">
                                            <circle cx="15" cy="15" r="10"  fill="#1a2273" />
                                        </svg>
                                    </div>
                                </div>
                            </el-header>
                            <!-- 标签页 -->
                            <el-header class="enca_tabs" height="30px">
                                <el-tabs class="tabList" type="card" :closable="true" v-model="editEncaId" @tab-click="selectTab" @tab-remove="deleteTab">
                                    <el-tab-pane class="tabItem" v-for="encaOption in encaList"
                                        :label="encaOption.enca.name"
                                        :name="encaOption.enca.id"
                                        :key="encaOption.enca.id"
                                    >
                                    </el-tab-pane>
                                </el-tabs>
                            </el-header>
                            <!-- 绘图及图形控制区 -->
                            <el-container class="draw_area" direction="horizontal" v-show="editEncaIndex != -1">
                                <el-main
                                    ref="drawEnca"
                                    @mousedown.native.middle="dragCanvas($event)"
                                    @wheel.native="zoomCanvas($event)" 
                                    @mousemove.native="updateMouseCoord($event)" 
                                    @keydown.native.space="goCenter" 
                                    @contextmenu.native.prevent="openMenu" contenteditable="true">
                                    <DrawEnca class="draw_enca_area" :options="encaList[editEncaIndex]"></DrawEnca>
                                </el-main>
                                <el-aside width="280px" class="control_panel">
                                    <!-- <div class="control_tabs">
                                        <div>图层控制</div>
                                        <div>显示控制</div>
                                        <div>属性</div>
                                    </div> -->
                                    <el-tabs v-model="controlPanel" type="border-card" @tab-click="changePanel" :stretch="true">
                                        <el-tab-pane label="图层控制" name="layer" class="layer_control">
                                            <el-collapse>
                                                <el-collapse-item title="板层控制" name="name">
                                                    <el-checkbox v-for="flag,layer in encaList[editEncaIndex].layerViewStatus.layer" v-model="encaList[editEncaIndex].layerViewStatus.layer[layer]" :key="layer">{{boardLayer[layer]}}</el-checkbox>
                                                </el-collapse-item>
                                            </el-collapse>
                                            <el-collapse>
                                                <el-collapse-item title="焊盘叠层控制" name="name">
                                                    <el-checkbox v-for="flag,layer in encaList[editEncaIndex].layerViewStatus.pinLayer" v-model="encaList[editEncaIndex].layerViewStatus.pinLayer[layer]" :key="layer">{{pinLayer[layer]}}</el-checkbox>
                                                </el-collapse-item>
                                            </el-collapse>
                                            <el-form :label-position="'top'">
                                              <el-form-item label="单位">
                                                <el-select v-model="encaList[editEncaIndex].enca.units" placeholder="封装单位">
                                                    <el-option label="毫米" value="mm"></el-option>
                                                    <el-option label="英制" value="mils"></el-option>
                                                </el-select>
                                              </el-form-item>
                                            </el-form>
                                        </el-tab-pane>
                                        <el-tab-pane label="显示控制" name="view"></el-tab-pane>
                                        <el-tab-pane label="属性" name="attr"></el-tab-pane>
                                    </el-tabs>
                                </el-aside>
                            </el-container>
                        </el-container>
                    </el-main>
                    <el-footer height="30px">
                        <span>
                            <span v-show="contextMenu">
                                右键菜单
                            </span>
                            <span v-show="!contextMenu">
                                {{operateStatusName[operateStatus]}}
                            </span>
                        </span>
                        当前坐标 
                        X : 
                        <span>{{nowMouseCoord.x}}</span>
                        Y : 
                        <span>{{nowMouseCoord.y}}</span>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import DrawEnca from "../components/DrawEnca.vue";

import Encapsulation from "../util/DrawEncaClass";

import encaData from "../util/encaData";

import { throttle } from "../util/utils";

export default {
    data(){
        return {
            // 当前显示的控制面板
            controlPanel : "layer",
            // 当前添加的图形
            addGraphicOption : {
                type:"",
                form:"",
                // 如果不是pin，则会有所编辑的层
                layer:"",
                exec:""
            },

            // 当前鼠标坐标
            nowMouseCoord:{
                x: 0,
                y: 0
            },

            // 当前操作状态
            operateStatus:"",

            // 状态名称
            operateStatusName:{
                ADD:"编辑中",
                MEASURE:"测量中",
                RESET_CENTER:"重置中心",
                BOX_CHOOSE:"框选中",

            },

            // 是否打开了右键菜单
            contextMenu:false,

            // 缩放倍速
            zoom: 1.2,
            // 板层
            boardLayer:{
                st:"丝印顶层",
                sb:"丝印底层",
                at:"装配顶层",
                ab:"装配底层",
                sm_t:"阻焊顶层",
                sm_b:"阻焊底层",
                et:"电气顶层",
                eb:"电气底层",
                bt:"高度顶层",
                bb:"高度底层",
                pt:"钢网顶层",
                pb:"钢网底层"
            },

            // 引脚层
            pinLayer:{
                t:"焊盘顶层",
                tp_t:"顶层上钢网",
                tp_b:"顶层下钢网",
                ts_t:"顶层上阻焊",
                ts_b:"顶层下阻焊",
                i:"焊盘中层",
                ip_t:"中层上钢网",
                ip_b:"中层下钢网",
                is_t:"中层上阻焊",
                is_b:"中层下阻焊",
                b:"焊盘底层",
                bs_t:"底层上钢网",
                bs_b:"底层下钢网",
                bp_t:"底层上阻焊",
                bp_b:"底层下阻焊",
                drill:"过孔",
                inspect:"检查标志顺位", 
                pinCoord:"检查引脚位置",       //检查引脚位置
            },

            editEncaId: "",

            editEncaIndex: -1,

            encaList:[]
        }
    },
    components:{
        DrawEnca
    },

    created(){
        this.createEncaData(encaData);
        this.createEncaData();
    },

    mounted(){
        this.goCenter();
        // this.scaleToFit();
        this.updateMouseCoord = throttle(this.updateMouseCoord,50);
    },

    methods:{
        selectTab({index}){
            this.editEncaIndex = +index;
        },

        // 切换控制面板
        changePanel(name){

        },

        deleteTab(id){
            let index = this.encaList.findIndex(enca=>enca.enca.id == id);
            if(~index){
                this.encaList.splice(index,1);
            }
            if(this.encaList.length == 0){
                this.createEncaData();
                return;
            }
            if(this.editEncaIndex == index){
                if(this.editEncaIndex > this.encaList.length - 1){
                    this.editEncaIndex = this.encaList.length - 1
                }
                this.editEncaId = this.encaList[this.editEncaIndex].enca.id
            }
        },

        // 创建一个封装数据
        createEncaData(encaData){
            if(!encaData){
                encaData = {};
            }
            let options = {
                viewStatus:{
                    grid:true,
                    text: true,
                    path: true,
                    shape: true,
                    pin: true
                },
                layerViewStatus:{
                    layer:{
                        st:true,
                        sb:false,
                        at:false,
                        ab:false,
                        sm_t:false,
                        sm_b:false,
                        et:false,
                        eb:false,
                        bt:false,
                        bb:false,
                        pt:false,
                        pb:false
                    },
                    pinLayer:{
                        t:true,
                        tp_t:true,
                        tp_b:true,
                        ts_t:false,
                        ts_b:false,
                        i:false,
                        ip_t:false,
                        ip_b:false,
                        is_t:false,
                        is_b:false,
                        b:false,
                        bp_t:false,
                        bp_b:false,
                        bs_t:false,
                        bs_b:false,
                        drill:true,
                        inspect:false,
                        pinCoord:false
                    }
                },
                addGraphic:[],
                previewGrapha:[],
                measureGrapha:[],
                gridSize:{
                    x: 0.5,
                    y: 0.5
                },
                origin:{
                    x: 0,
                    y: 0
                },
                scale: 10,
                enca:new Encapsulation(encaData),
                smallDist:{
                    x: 0.5,
                    y: 0.5
                }
            }
            this.encaList.push(options);
            console.log(options.enca)
            // 初始化默认值
            if(options.enca.units == "mils"){
                options.scale = 0.5;
                options.gridSize.x = 39.37;
                options.gridSize.y = 39.37;
            }else{
                options.scale = 18;
                options.gridSize.x = 0.5;
                options.gridSize.y = 0.5;
            }


            options.enca.origin = {};

            this.editEncaIndex = this.encaList.length - 1;
            this.editEncaId = this.encaList[this.editEncaIndex].enca.id;
        },

        // 将原点居中
        goCenter(){

            this.scaleToFit();
            // 获取图形的范围
            let range = this.encaList[this.editEncaIndex].enca.getRange();

            let center = {
                x: (range.x[0] + range.x[1]) / 1,
                y: (range.y[0] + range.y[1]) / 1
            };
            // 获取绘图区域的宽高
            let drawWidth = this.$refs.drawEnca.$el.clientWidth, drawHeight = this.$refs.drawEnca.$el.clientHeight;

            let origin = {
                x: drawWidth / 2 - center.x * this.encaList[this.editEncaIndex].scale,
                y: drawHeight / 2 - center.y * this.encaList[this.editEncaIndex].scale
            }

            this.encaList[this.editEncaIndex].origin = {
                x: origin.x,
                y: origin.y
            }
        },

        // 自适应缩放倍数
        scaleToFit(){
            
            // 获取图形的范围
            let range = this.encaList[this.editEncaIndex].enca.getRange();

            // 初始将图形居中
            let width = range.x[1] - range.x[0], height = range.y[1] - range.y[0];

            if(!width || !height){
                return;
            }

            // 获取绘图区域的宽高
            let drawWidth = this.$refs.drawEnca.$el.clientWidth, drawHeight = this.$refs.drawEnca.$el.clientHeight;

            let scale = Math.min(drawWidth * 0.8 / width, drawHeight * 0.8 / height);

            this.encaList[this.editEncaIndex].scale = scale;
        },

        // 当鼠标中键按下拖拽画布
        dragCanvas(e){
            let start = {
                x: e.clientX,
                y: e.clientY
            }
            let startOrigin = {
                x: this.encaList[this.editEncaIndex].origin.x,
                y: this.encaList[this.editEncaIndex].origin.y
            };
            window.onmousemove = throttle((moveEvent)=>{
                let move = {
                    x: moveEvent.clientX,
                    y: moveEvent.clientY
                }
                let offset = {
                    x: move.x - start.x,
                    y: move.y - start.y
                }
                this.encaList[this.editEncaIndex].origin = {
                    x: startOrigin.x + offset.x,
                    y: startOrigin.y + offset.y
                }
            });

            
            window.onmouseup = ()=>{
                window.onmouseup = null;
                window.onmousemove = null;
            }
        },

        // 缩放
        zoomCanvas(e){
            let mousePoint = this.clientToCanvasPoint({
                x: e.clientX,
                y: e.clientY
            });

            let encaOption = this.encaList[this.editEncaIndex];

            // 放大
            if(e.deltaY < 0){
                this.encaList[this.editEncaIndex].scale *= this.zoom;
                encaOption.origin.x = mousePoint.x + (encaOption.origin.x - mousePoint.x) * this.zoom;
                encaOption.origin.y = mousePoint.y + (encaOption.origin.y - mousePoint.y) * this.zoom;
            }
            // 缩小
            else{
                this.encaList[this.editEncaIndex].scale /= this.zoom;
                encaOption.origin.x = mousePoint.x + (encaOption.origin.x - mousePoint.x) / this.zoom;
                encaOption.origin.y = mousePoint.y + (encaOption.origin.y - mousePoint.y) / this.zoom;
            }
        },

        // 打开右键菜单
        openMenu(e){
            this.contextMenu = true;
            document.onclick = ()=>{
                this.contextMenu = false;
            }
        },

        // 添加图形
        addGraphic(graphic_type){
            this.operateStatus = "ADD";
            let [type,form] = graphic_type.split("_");
            this.addGraphicOption.type = type;
            this.addGraphicOption.form = form;
            this.addGraphicOption.exec = graphic_type;
            // console.log(Encapsulation.createGraphic(type,form))

            

            let layerViewStatus = this.encaList[this.editEncaIndex].layerViewStatus;
            if(this.addGraphicOption.type != "PIN"){
                if(layerViewStatus.layer.st){
                    this.addGraphicOption.layer = "st";
                }else{
                    this.addGraphicOption.layer = Object.keys(layerViewStatus.layer).filter(layer=>layerViewStatus.layer[layer])[0];
                }
            }
            this.startAddGraphic();
        },

        startAddGraphic(){
            let encaOption = this.encaList[this.editEncaIndex];

            let drawEnca = this.$refs.drawEnca.$el;
            
            drawEnca.onclick = ()=>{

            }

            if(this.addGraphicOption.type !== "PIN"){
                
            }

            // console.log(.enca.createGraphic(this.addGraphicOption));
        },

        // 添加一个焊盘
        addPin(){

        },

        // 添加线条
        addPath(){

        },

        // 添加文字
        addText(){

        },

        // 添加铜皮
        addShape(){

        },

        // 添加一脚标识
        addOnePinMark(){

        },

        // 更新鼠标位置
        updateMouseCoord(e){
            let point = {
                x: e.clientX,
                y: e.clientY
            }
            let encaOption = this.encaList[this.editEncaIndex];
            let coord = this.clientToCanvasPoint(point);
            this.nowMouseCoord = {
                x: parseFloat(((coord.x - encaOption.origin.x) / encaOption.scale).toFixed(3)),
                y: -parseFloat(((coord.y - encaOption.origin.y) / encaOption.scale).toFixed(3))
            }
        },

        // 获取鼠标相对于绘图区域左上角的坐标
        clientToCanvasPoint(point){
            var rect = this.$refs.drawEnca.$el.getBoundingClientRect();

            return {
                x: point.x - rect.left,
                y: point.y - rect.top
            }
        }
    }
}
</script>

<style lang="less">
.editPage{
    height: 100%;
    .el-container{
        height: 100%;
        background: #eaeaea;
        .page_header{
            background: #fa4d4dd6;
            .header_title{
                line-height: 60px;
                font-size: 30px;
                font-weight: bolder;
                letter-spacing: 5px;
                color: #fff;
            }
        }
        .main_area{
            .left_tool{
                border-top: 1px solid #333;
                border-right: 1px solid #333;
                overflow: hidden;
            }
            .el-main{
                padding: 0;
                .base_graphic_tool{
                    display:flex;
                    background: #fff;
                    .tool_item{
                        &:hover{
                            background: rgb(233, 233, 235);
                        }
                        &.active{
                            background: #F56C6C;
                        }
                    }
                    >div{
                        display:flex;
                    }
                }
                .enca_tabs{
                    .tabList{
                        // background: red;
                        .el-tabs__header{
                            margin: 0;
                            .el-tabs__item{
                                height: 30px;
                                line-height: 30px;
                                border: 1px solid #cecece;
                                &.is-active{
                                    background: #fff;
                                }
                                &.is-hover{
                                    background: none;
                                    border-color: orange;
                                }
                            }
                        }
                    }
                }
                .draw_area{
                    .control_panel{
                        position:relative;
                        .el-tabs{
                            position:absolute;
                            box-shadow: none;
                            box-sizing: border-box;
                            height: 100%;
                            left: 0;
                            right: 0;
                        }
                        .el-tabs__header{
                            margin: 0;
                        }
                        .el-tabs__content {
                            height: calc(100% - 39px);
                            box-sizing: border-box;
                            overflow-y: auto;
                            padding: 10px;
                        }

                        .layer_control{
                            .el-collapse-item__header{
                                background: #cccccc;
                                color: #fff;
                                height: 30px;
                            }
                        }
                    }
                    .el-main{
                        outline: none;
                        cursor: default;
                        .draw_enca_area{
                            outline: none;
                            cursor: default;
                        }
                    }
                }
            }
        }
    }
}
</style>